﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <link href="style/iconfont.css" rel="stylesheet" />
    <title></title>
    <style>
        html {
            overflow: hidden;
            height: 100%;
        }

        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }


        div {
            box-sizing: border-box;
        }

        #resize {
            position: fixed;
            right: 0px;
            bottom: 0;
            border: 10px solid #000;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: #676767;
            border-bottom-color: #676767;
        }

            #resize:hover {
                cursor: nw-resize;
            }

            #resize:active {
                cursor: wait;
            }

        .top {
            width: 100%;
            height: 40px;
            background-color: rgba(86, 86, 86, 0.90);
        }

        .system-menu {
            position: absolute;
            right: 0px;
            top: 0px;
            user-select: none;
            display: flex;
            align-items: center;
        }

            .system-menu .itme {
                width: 40px;
                height: 40px;
                color: white;
                font-size: 14px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                user-select: none;
            }

            .system-menu .font-style {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            .system-menu .system-style:hover {
                background-color: rgb(76, 76, 76);
            }

            .system-menu .font-style:hover {
                color: dodgerblue;
            }

        .option-menu {
            border-radius: 6px;
            background-color: #fafafa;
            color: black;
            position: absolute;
            left: 100px;
            top: 50px;
            z-index: 90;
            display: none;
        }

            .option-menu ul {
                list-style: none;
                padding: 0;
            }

                .option-menu ul li {
                    margin-left: 5px;
                    margin-right: 5px;
                    padding-left: 10px;
                    padding-right: 10px;
                    font-size: 14px;
                    line-height: 32px;
                    cursor: pointer;
                    border-bottom: 1px solid #d4d4d4;
                }

                    .option-menu ul li:hover {
                        background-color: antiquewhite;
                    }

        .font-opeion {
            color: dodgerblue;
        }


        .body {
            width: 100%;
            height: calc(100% - 30px);
            padding: 5px;
            background-color: #1f1f1f;
            overFlow-x: hidden;
            overFlow-y: scroll;
            scrollBar-face-color: rgba(86, 86, 86, 0.70);
            /*scrollBar-base-color: black;*/
            scrollBar-track-color: #1f1f1f;
            scrollBar-shadow-color: rgba(86, 86, 86, 1);
            /*display: inline-block;*/
        }

            .body:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            .body > div {
                /*cursor: move;*/
            }

        .app-box {
            width: 90px;
            height: 90px;
            border-radius: 10px;
            margin: 10px;
            float: left;
            background-color: rgba(255, 255, 255, 0.20);
            overflow: hidden;
            position: relative
        }

            .app-box:hover {
                width: 100px;
                height: 100px;
                border-radius: 10px;
                margin-bottom: 0px;
                margin-right: 5px;
                margin-left: 5px;
            }

            .app-box img {
                width: 40%;
                height: 40%;
                margin: 5%;
                float: left;
            }

        .app-exe {
            width: 90px;
            height: 90px;
            margin: 10px;
            float: left;
            border-radius: 10px;
            overflow: hidden;
            /*border: 1px solid red;*/
        }

            .app-exe img {
                width: 50px;
                height: 50px;
                position: relative;
                left: calc(50% - 25px);
                top: 10px;
                cursor: pointer;
            }

                .app-exe img:hover {
                    width: 55px;
                    height: 55px;
                    left: calc(50% - 30px);
                    top: 5px;
                }

            .app-exe div {
                height: 30px;
                width: 90px;
                font-size: 14px;
                text-align: center;
                line-height: 30px;
                color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .add-app {
            font-size: 14px;
            color: white;
            font-weight: bold;
            background: url('img/plus.png') center center no-repeat;
            background-color: rgba(255, 255, 255, 0.20);
        }

            .add-app .itme-top {
                width: 100%;
                height: 50%;
                line-height: 50px;
                text-align: center;
                -moz-border-radius-topleft: 10px;
                -moz-border-radius-topright: 10px;
                cursor: pointer;
                position: relative;
                top: -45px;
            }

                .add-app .itme-top:hover {
                    color: black;
                    background-color: rgba(255, 255, 255, 0.8);
                    /*#ffdaa9;*/
                }

            .add-app .itme-bottom {
                width: 100%;
                height: 50%;
                line-height: 50px;
                text-align: center;
                -moz-border-radius-bottomleft: 10px;
                -moz-border-radius-bottomright: 10px;
                cursor: pointer;
                position: relative;
                bottom: -45px;
            }

                .add-app .itme-bottom:hover {
                    color: black;
                    background-color: rgba(255, 255, 255, 0.8);
                    /*#ffdaa9;*/
                }

        @keyframes TopSlipIn {
            0% {
                top: -45px;
            }

            100% {
                top: 0px;
            }
        }

        @keyframes BottomSlipIn {
            0% {
                bottom: -45px;
            }

            100% {
                bottom: 0px;
            }
        }

        @keyframes TopSlipOut {
            0% {
                top: 0px;
            }

            100% {
                top: -45px;
            }
        }

        @keyframes BottomSlipOut {
            0% {
                bottom: 0px;
            }

            100% {
                bottom: -45px;
            }
        }

        .bg-1 {
            background-color: rgba(255, 255, 255, 0.40);
        }

        .bg-2 {
            background-color: #ffdaa9;
        }

        .font-blue {
            color: cornflowerblue;
        }

        .cycle-animation {
        }

            .cycle-animation:hover {
                animation: cycle 1s backwards;
            }

        @keyframes cycle {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .message {
            max-width: 80%;
            min-height: 50px;
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 15px 0 15px;
            background-color: white;
            border-radius: 10px;
            line-height: 50px;
            color: black;
            font-size: 14px;
            word-wrap: break-word;
            animation: thin 3s forwards;
            z-index: 99;
        }

        @keyframes thin {
            0% {
                top: 70%;
            }

            20% {
                top: 75%;
            }

            80% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        .overflow-icon {
            width: inherit;
            height: 22px;
            position: absolute;
            left: 0px;
            bottom: 0px;
            background-color: rgba(86, 86, 86, 0.70);
            color: white;
            text-align: center;
            line-height: 10px;
            z-index: 90;
            cursor: default;
        }
    </style>
    <script type="text/javascript">
        /*
         * 页面禁用拖拽上传时 浏览器默认打开图片
        */
        // 拖动标识
        var drop = true;
        document.addEventListener('drop', function (e) {
            e.preventDefault()
            drop = true;;
        }, false)
        document.addEventListener('dragover', function (e) {
            e.preventDefault();
            if (drop) {
                drop = false;
                window.external.ShowAddForm();
            }
        }, false)
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        }, false)


        function AppendIcon(json) {
            drop = true;
            var icon_info = JSON.parse(json);
            for (var i = 0; i < icon_info.length; i++) {
                var exe_html = '';
                exe_html += '<div class="app-exe" data-fullName="' + icon_info[i].fullName + '">';
                exe_html += '<img data-fullName="' + icon_info[i].fullName + '"  src = "' + icon_info[i].path + '" ondblclick="open_exe(\'' + icon_info[i].fullName + '\')" draggable="false" />';
                exe_html += '<div title="' + icon_info[i].name + '" draggable="false" >' + icon_info[i].name + '</div>';
                exe_html += '</div>';
                $('#body').append(exe_html);
            }
        }

        let config_data = {
            Enable_FolderOrFile_Add: false,
        }


        // 给Winform调用的方法
        function SetDrop(d) {
            drop = d
        }
        function ShowIcon(json) {
            drop = true;
            $('#body').html(' ');
            var icon_info = JSON.parse(json);
            for (var i = 0; i < icon_info.length; i++) {
                var exe_html = '';
                exe_html += '<div class="app-exe" data-fullName="' + icon_info[i].fullName + '">';
                exe_html += '<img data-fullName="' + icon_info[i].fullName + '"  src = "' + icon_info[i].path + '" ondblclick="open_exe(\'' + icon_info[i].fullName + '\')" draggable="false" />';
                exe_html += '<div title="' + icon_info[i].name + '" draggable="false" >' + icon_info[i].name + '</div>';
                exe_html += '</div>';
                $('#body').append(exe_html);
                //window.external.Test(icon_info[i].fullName, " path");

                //if (icon_info[i].name == "1612535572834.jpg") {
                //    alert(icon_info[i].path);
                //}

            }



            // #region 禁用文件夹添加

            if (config_data.Enable_FolderOrFile_Add) {
                var add_html = '';
                add_html += '<div class="app-box add-app">';
                add_html += '<div class="itme-top bg-1" draggable="false" >文件夹</div>';
                add_html += '<div class="itme-bottom bg-1" draggable="false" >文件</div>';
                add_html += '</div>';
                $('#body').append(add_html);
                read_style();
            }
            // #endregion

        }

        // #region 调用C#方法

        function form_resize(w, h) {
            window.external.FormResize(w, h);
        }
        //打开文件
        function open_exe(path) {
            window.external.OpenExe(path);
        }
        //在文件夹中打开文件
        function open_folder(path) {
            window.external.OpenFolder(path);
        }
        var windows_show = 1;
        var windows_ding = true;//true : 最上层显示
        $(document).ready(function () {
            // 窗体大小改变
            $('#resize').mousedown(function (e) {
                var isdown = true;
                $(document).mousemove(function (e2) {
                    if (isdown) {
                        var left2 = e2.pageX,
                            top2 = e2.pageY;
                        form_resize(left2, top2);

                    }
                }).mouseup(function (e) {
                    isdown = false;
                }).mouseenter(function (e) {
                    isdown = false;
                });
            });

            var icon_info = JSON.parse(window.external.Html_Load());

            windows_ding = icon_info.topMost;

            $('#top').mousedown(function (e) {
                windows_show = window.external.mousedown();
            });
            $('#max').click(function () {
                window.external.MaxWindows();
            });
            $('#hide').click(function hide() {
                window.external.HideWindows();
            });

            $('body').mousemove(function () {
                if (windows_show == 0) {
                    window.external.DragoutWindows();
                    windows_show = 1;
                }
            });
            $('body').mouseleave(function () {
                if (windows_show == 1) {
                    windows_show = window.external.Mouseup();
                }
            });
            $('#rerun').click(function () {

                window.external.Rerun();
                read_style();
                message('已刷新');
            });
            $('#ding').click(function () {
                windows_ding = window.external.Ding();
                ding_click();
                message((windows_ding) ? '已经固定在了最上层' : '已取消固定显示');
            });

            //文件菜单
            $('#open').click(function () {
                message("正在打开...");
                var path = $('#option').attr('fullName');
                open_exe(path);
                $('#option').hide();
            });
            $('#openFolder').click(function () {
                message("正在打开...");
                var path = $('#option').attr('fullName');
                open_folder(path);
                $('#option').hide();
            });
            $('#delete').click(function () {
                message("开发中...");
                $('#option').hide();
            });
            $('#restore').click(function () {
                message("开发中...");
                $('#option').hide();
            });
            $('#cancel').click(function () {
                $('#option').hide();
            });

            read_style();
            ding_click();
        })
        // #endregion


        function ding_click() {
            if (windows_ding) {
                $('#ding span').addClass('font-blue');
            } else {
                $('#ding span').removeClass('font-blue');
            }
        }


        //#body事件
        function read_style() {
            //添加动画
            $('.add-app').mousemove(function () {
                $('.itme-bottom').css('animation', 'BottomSlipIn 0.3s forwards;');
                $('.itme-top').css('animation', 'TopSlipIn 0.3s forwards;');
            });
            $('.add-app').mouseout(function (event) {
                var e = event.toElement || event.relatedTarget;
                while (e && e.parentNode && e.parentNode != window) {
                    if (e.parentNode == this || e == this) {
                        if (e.preventDefault) e.preventDefault();
                        return false;
                    }
                    e = e.parentNode;
                }
                $('.itme-bottom').css('animation', 'BottomSlipOut 1s forwards;');
                $('.itme-top').css('animation', 'TopSlipOut 1s forwards;');
            });
            //拖动动画 -- 左键
            $('.app-exe').mousedown(function (e) {
                $('#option').hide();//隐藏菜单
                if (e.which == 1) {
                    var obj = $(this);
                    var div_x = e.pageX - obj.offset().left;//图标的位置
                    var div_y = e.pageY - obj.offset().top;//图标的位置
                    darg_icon(obj, div_x, div_y);
                } else if (e.which == 3) {
                    $('#option').show();
                    var left = e.pageX;
                    var top = e.pageY;
                    var body_width = $('#body').width();
                    var body_height = $('#body').height();
                    var width = $('#option').width();
                    var height = $('#option').height();
                    var l = body_width - left;
                    var t = body_height - top;
                    if (t < height) {
                        top = top - height;
                    }
                    if (l < width) {
                        left = left - width;
                    }
                    var path = $(this).attr('data-fullName');
                    $('#option').attr('fullName', path);
                    $('#option').css({ "left": left, "top": top });
                }
            });
            $('.app-box').mousedown(function (e) {
                $('#option').hide();//隐藏菜单
                if (e.which == 1) {
                    var obj = $(this);
                    var div_x = e.pageX - obj.offset().left;//图标的位置
                    var div_y = e.pageY - obj.offset().top;//图标的位置
                    darg_icon(obj, div_x, div_y);
                }
            });
            //添加事件
            $('.itme-top').click(function () {
                //window.external.AddApp(1);
                message("开发中...");
            });
            $('.itme-bottom').click(function () {
                //window.external.AddApp(0);
                message("开发中...");
            });
        }

        //拖拽图标
        function darg_icon(obj, div_x, div_y) {
            var after_obj = true;
            var isMove = true;
            var mouse_x, mouse_y, index = -1;
            var wh = $(window).height();
            var ww = $(window).width();
            //移入移出
            $(document).mousemove(function (_e) {
                if (isMove) {
                    mouse_x = _e.pageX;
                    mouse_y = _e.pageY;
                    var left = (_e.pageX - div_x);
                    var top = (_e.pageY - div_y);//+ 'px'
                    if (top < 50) top = 50;
                    else if (top > wh - 110) top = wh - 110;
                    if (left < 0) left = 0;
                    else if (left > ww - 110) left = ww - 110;
                    if (left > 0 && left < ww - 110 && top > 50 && top < wh - 110) {
                        obj.css({ 'position': 'absolute', 'z-index': '99', "left": left, "top": top });
                    } else {
                        obj.css({ "left": left, "top": top });
                    }
                    if (after_obj) {
                        //当前排序号
                        index = $('#body').children('div').index(obj);
                        after_obj = false;
                    }
                }
            }).mouseup(function () {
                if (isMove) {
                    isMove = false;
                    var eq;
                    var scrollTop = $('#body').scrollTop();
                    var y = parseInt((mouse_y - 45 + scrollTop) / 110);//跳过y行，即第y+1行
                    var line_count = parseInt($('#body').width() / 110) * y;

                    if ((mouse_x - 5) < 50) {
                        eq = -1;
                    } else {
                        eq = ((mouse_x - 55) / 110) + 1;
                        if (index >= parseInt(eq)) {
                            eq -= 1;
                        }
                        window.external.Test(index, parseInt(eq));
                    }
                    if (line_count > 0) {
                        eq = eq + line_count;
                    }
                    eq = parseInt(eq);


                    var length = $('#body').children('div').length - 1;
                    if (length == index && config_data.Enable_FolderOrFile_Add) {
                        message('不可以移动。');
                    }
                    if (index != -1) {
                        var r = darg_insert(eq, obj);
                        if (r) {
                            var fullName = obj.attr('data-fullName');
                            window.external.AppLocation(fullName, index + 1, $('#body').children('div').index(obj) + 1);//nowPath，oldNumber，newNumber
                            //message("old：" + (index + 1) + " new：" + $('#body').children('div').index(obj) + 1);
                        }

                    }
                    obj.css({ 'position': 'relative', 'z-index': 'auto', "left": 'auto', "top": 'auto' });
                }
            });
        }
        function darg_insert(index, obj) {
            if (index == -1) {
                $('#body').children('div').eq(0).before(obj);
                return true;
            }
            else {
                var length = $('#body').children('div').length - 1;
                if (length <= index && config_data.Enable_FolderOrFile_Add) {
                    index = length - 1;
                    message('程序不可以放最后面！');
                    return false;
                }
                $('#body').children('div').eq(index).after(obj);
                return true;
            }
        }

        // 弹窗
        var message_index = 0;
        function message(text) {
            var id = 'msg' + message_index;
            var message_html = '<div class="message" id="' + id + '">' + text + '</div>';
            $('body').append(message_html);
            setTimeout(function () {
                $("div").remove("#" + id);
            }, 3000);
            message_index++;
        }

    </script>
</head>
<body>
    <div class="top" id="top" data-aa="c:\a\a\d"></div>
    <div class="system-menu">
        <div class="itme font-style" id="rerun">
            <span class="iconfont icon-refresh cycle-animation"></span>
        </div>
        <div class="itme font-style" id="ding">
            <span class="iconfont icon-dingzi"></span>
        </div>
        <div class="itme system-style" id="hide">-</div>
        <div class="itme system-style" id="max">+</div>
    </div>
    <div id="option" class="option-menu" fullName="">
        <ul>
            <li id="open">打开</li>
            <li id="openFolder">在文件资源中打开</li>
            <li id="delete">删除</li>
            <li id="restore">还原</li>
            <li id="cancel">取消</li>
        </ul>
    </div>

    <div class="body" id="body">
        <div class="app-exe">
            <img src="../NewFolder/icon/folder-full.PNG" />
            <div>Visual Studio Code</div>
        </div>
        <div class="app-exe">
            <img src="../NewFolder/icon/folder-full.PNG" />
            <div>水洗沙账单</div>
        </div>
        <div class="app-box">
            <div class="overflow-icon">. . .</div>
            <img src="../NewFolder/icon/水洗沙账单.PNG" />
            <img src="../NewFolder/icon/Visual Studio Code.PNG" />
            <img src="../NewFolder/icon/水洗沙账单.PNG" />
            <img src="../NewFolder/icon/Visual Studio Code.PNG" />
        </div>
        <div class="app-box add-app item">
            <div class="itme-top bg-1">文件夹</div>
            <div class="itme-bottom bg-1">文件</div>
        </div>

    </div>

    <div id="resize"></div>

</body>
</html>
